/**
 * Created by Administrator on 2017/5/23.
 */
'use strict'
import Vue from 'vue'
var resultTemplete = require('html!./result.html');

require('./model.less');
module.exports = {
  template: resultTemplete,
  data:function(){
    return {
      userId:localStorage.getItem("userId"),
      modelId:localStorage.getItem("modelId"),//localStorage.getItem('modelId'),
      isTab1:false,
      isTab2:true,
      modelName:localStorage.getItem('modelName'),
      modelDesc:localStorage.getItem('modelDesc'),
      dataList:[],
      tableName:localStorage.getItem("oldTableName"),
      resultList:[],
      layLoad:'',
      type:'',
      isFromTrail:localStorage.getItem('isFromTrail'),
      url:'http://'+window.location.host+'/ResultDataApi.do/getDataByApi?token='+localStorage.getItem("token")+'&pageSize=10&pageIndex=1&resTableName='+localStorage.getItem("oldTableName")
    }
  },
  created:function(){
   /* this.type = this.$route.query.type;
    this.modelId = this.$route.query.modelId;
    this.modelName = this.$route.query.modelName;
    this.modelDesc = this.$route.query.modelDesc;*/
    var me = this;
    me.layLoad = layer.load(2, {shade: 0.1, area: ['32px', '64px']});
    //定时获取算法状态
    var timeout = setInterval(function(){
      if(me.resultList.length!=0){
        layer.close(me.layLoad);
        clearInterval(timeout);
      }else{
        me.getState();
      }
    },30000);
  },
  methods:{
    chooseTab1:function(){
      this.isTab1 = true;
      this.isTab2 = false;
    },
    chooseTab2:function(){
      this.isTab1 = false;
      this.isTab2 = true;
    },
    getState:function () {
      var me = this;
      this.$http.get('/eyeShowResultController/getState.do?tableName='+me.tableName).then(function(res) {
        //获取变量列表
        if(res.data.status === 'OK') {
          if(res.data.result.length!=0){
            me.resultList=res.data.result;
            me.getDataImgList();
          }
        }
      });
    },
    getDataImgList:function(){
      var me = this;
      var layLoad = layer.load(2, {shade: 0.1, area: ['32px', '64px']});
      var isRecorded = false;
      if(me.isFromTrail=='true'){
        isRecorded = false;
      }else{
        isRecorded = true;
      }
      this.$http.get('/eyeImgSettingController/getResultImgDataList.do?modelId='+me.modelId+'&tableName='+me.tableName+'&isRecorded='+isRecorded).then(function(res) {
        //获取图形设置接口
        console.log('获取图形设置接口，请求后返回结果: ', res);
        if(res.data.status === 'OK') {
          var dataList = res.data.result;
          for(var i=0;i<dataList.length;i++){
            $('#picContent').append('<div class="result-pic"><p class="result-title">'+dataList[i]['imgName']+'</p> <div class="result-echart" id="dataDemo'+i+'"></div></div>');
            for(var j in dataList[i]){
              if(j=='1'){
                console.log(dataList[i][j][0]+"-----"+dataList[i][j][0].xAxis_data+"----"+dataList[i][j][0].series_data);
                me.initDatatab1('dataDemo'+i,dataList[i][j][0].xAxis_data,dataList[i][j][0].series_data);
              }
              if(j=='2'){
                console.log(dataList[i][j][0].xAxis_data+"----"+dataList[i][j][0].series_data);
                me.initDatatab3('dataDemo'+i,dataList[i][j][0].xAxis_data,dataList[i][j][0].series_data);
              }
              if(j=='3'){
                console.log(dataList[i][j][0].legend_data+"----"+dataList[i][j][0].series_data);
                me.initDatatab2('dataDemo'+i,dataList[i][j][0].legend_data,dataList[i][j][0].series_data);
              }
              if(j=='4'){
                console.log(dataList[i][j][0].series_data);
                me.initDatatab4('dataDemo'+i,dataList[i][j][0].series_data);
              }
            }
          }
          layer.close(layLoad);
          me.getDataList();
        }else {
          layer.close(layLoad);
          layer.msg(res.data.message);
        }
      });
    },
    getDataList:function () {
      var me = this;
      this.$http.get('/eyeShowResultController/getResultList.do?tableName='+me.tableName).then(function(res) {
        if(res.data.status === 'OK') {
          if(res.data.result){
            me.resultList = res.data.result;
          }
        }
      });
    },
    //柱状图
    initDatatab1:function(id,data,value){
      var me = this;
      var dataDemo = echarts.init(document.getElementById(id));
      var option1 = {
        color: ['#3398DB'],
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '4%',
          right: '4%',
          bottom:  '5%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            data : data,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel:{
              interval: 0,
              rotate: 30
            }
          }
        ],
        yAxis : [
          {
            type : 'value'
          }
        ],
        series : [
          {
            type:'bar',
            barWidth: '60%',
            itemStyle : { normal: {label : {show: true, position: 'top'}}},
            data:value
          }
        ]
      };
      dataDemo.setOption(option1);
    },
    //饼状图
    initDatatab2:function(id,data,dataList){
      var me = this;
      var dataDemo = echarts.init(document.getElementById(id));
      var option2 = {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        toolbox: {
          show : false,
          feature : {
            restore : {show: true},
            saveAsImage : {show: true}
          }
        },
        legend: {
          orient : 'horizontal',
          x: 'left',
          y:'15',
          data:data
        },
        series: [
          {
            type:'pie',
            selectedMode: 'single',
            radius: [0, '50%'],
            itemStyle : {
              normal : {
                label : {
                  position : 'inner',
                  formatter : function (params) {
                    return (params.percent - 0).toFixed(0) + '%'
                  }
                },
                labelLine : {
                  show : false
                }
              },
              emphasis : {
                label : {
                  show : true,
                  formatter : "{b}\n{d}%"
                }
              }

            },
            data:dataList
          }
        ]
      };
      dataDemo.setOption(option2);
    },
    //折线图
    initDatatab3:function(id,data,value){
      var me = this;
      var dataDemo = echarts.init(document.getElementById(id));
      var option3 =  {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}'
        },
        xAxis: {
          type: 'category',
          name: 'x',
          splitLine: {show: false},
          data: data
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'log',
          name: 'y'
        },
        series: value
      };
      dataDemo.setOption(option3);
    },
    //散点图
    initDatatab4:function(id,value){
      var me = this;
      var dataDemo = echarts.init(document.getElementById(id));
      var option3 =  {
        grid: {
          left: '3%',
          right: '7%',
          bottom: '3%',
          containLabel: true
        },
        tooltip : {
          // trigger: 'axis',
          showDelay : 0,
          formatter : function (params) {
           /* if (params.value.length > 1) {
              return params.seriesName + ' :<br/>'
                + params.value[0] + 'cm '
                + params.value[1] + 'kg ';
            }
            else {
              return params.seriesName + ' :<br/>'
                + params.name + ' : '
                + params.value + 'kg ';
            }*/
          },
          axisPointer:{
            show: true,
            type : 'cross',
            lineStyle: {
              type : 'dashed',
              width : 1
            }
          }
        },
        toolbox: {
          feature: {
            dataZoom: {},
            brush: {
              type: ['rect', 'polygon', 'clear']
            }
          }
        },
        brush: {
        },
        xAxis : [
          {
            type : 'value',
            scale:true,
            splitLine: {
              show: false
            }
          }
        ],
        yAxis : [
          {
            type : 'value',
            scale:true,
            splitLine: {
              show: false
            }
          }
        ],
        series : [
          {
            type:'scatter',
            data: value
          }
        ]
      };
      dataDemo.setOption(option3);
    },
   /* goBack:function(){
      this.$router.replace({ path: '/product/show-setting'});
    },*/
    save:function(){
      var me = this;
      window.location.href= Vue.prototype.$http.defaults.baseURL+'/eyeShowResultController/down/exportExcel.do?tableName='+me.tableName+'&fileName='+me.tableName;
    },
    sumbitPre:function () {
      var me = this;

        me.$router.push({path:'/product/modelUseDataExplore',query: {modelId:me.modelId,modelDesc:me.modelDesc,modelName:me.modelName }});

    },
    getApi:function(){
      layer.open({
        type: 1,
        title: false,
        content: $('#api'),
        area: ['650px', '390px']
      });
    }
  }
};
